<!-- 
  功能点：
    1. 渲染出来验证码
    2. 点击能够刷新
    3. v-model 绑定 captchaId
 -->

<template>
  <div class="captcha" v-html="svg" @click="refresh"></div>
</template>

<script>
import { getCaptcha } from "@/api/login.js";

export default {
  name: "Captcha",

  props: ["modelValue"],

  emits: ["update:modelValue"],

  data() {
    return {
      svg: "",
    };
  },

  // methods: {
  //   refresh() {
  //     getCaptcha()
  //       .then((data) => {
  //         this.svg = data.data;
  //         this.$emit("update:modelValue", data.captchaId);
  //       })
  //       .catch(() => {
  //         console.log("catch");
  //       });
  //   },
  // },

  // created() {
  //   this.refresh();
  // },
};
</script>

<style scoped>
.captcha {
  width: 100px;
  height: 30px;
  cursor: pointer;
  background-color: #000;
}

.captcha :deep(svg) {
  display: block;
  width: 100%;
  height: 100%;
}
</style>
